<template>
  <a-form ref="form" :model="formData" :rules="rules" layout="vertical">
    <div class="form__box">
      <a-form-item :label="`数据绑定key`" field="dataIndex">
        <template v-if="dataObj.mode === 'dataView'">
          <a-select
            v-model="formData.dataViewSel"
            allow-clear
            @change="changeDataViewSel"
          >
            <a-option value="手填">手填</a-option>
            <a-option
              v-for="option in dataObj.queryGroupList"
              :key="option.groupId + ' ' + option.queryKey"
              :value="option.groupId + ' ' + option.queryKey"
              :disabled="
                dataObj.pageData.some(
                  (item) =>
                    item.formData.dataIndex ===
                    option.groupId + ' ' + option.queryKey
                )
              "
              :title="
                (option.formName
                  ? `${option.formName}_${option.columnName}`
                  : option.columnName) +
                (option.aggregateId
                  ? `（${option.funColumnAs}的函数条件）`
                  : '')
              "
              >{{
                option.formName
                  ? `${option.formName}_${option.columnName}`
                  : option.columnName
              }}{{
                option.aggregateId ? `（${option.funColumnAs}函数条件）` : ""
              }}</a-option
            >
          </a-select>
          <a-input
            v-model="formData.dataIndex"
            :disabled="formData.dataViewSel !== '手填'"
          ></a-input>
        </template>
        <a-input
          v-else
          v-model="formData.dataIndex"
          :disabled="formData.notMod"
        ></a-input>
        <field-linkage :formData="formData"></field-linkage>
      </a-form-item>
      <a-form-item label="将值赋给下列字段" v-if="dataObj.mode === 'dataView'">
        <a-select
          v-model="formData.assignmentList"
          multiple
          allow-clear
          @change="changeAssignmentList"
        >
          <a-option
            v-for="option in dataObj.queryGroupList"
            :key="option.groupId + ' ' + option.queryKey"
            :value="option.groupId + ' ' + option.queryKey"
            >{{
              option.formName
                ? `${option.formName}_${option.columnName}`
                : option.columnName
            }}{{
              option.aggregateId ? `（${option.funColumnAs}函数条件）` : ""
            }}</a-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="`字段名称`" field="name">
        <a-input v-model="formData.name"></a-input>
        <a-checkbox v-model="formData.hideTitle">隐藏标题</a-checkbox>
      </a-form-item>
      <a-form-item :label="`控件类型`" field="type">
        <a-select
          v-model="formData.type"
          @change="changeControlTypes($event, formData)"
        >
          <a-option
            :value="item.value"
            v-for="item in typeOptions"
            :key="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`日期类型`" field="typeFormat">
        <a-select v-model="formData.typeFormat">
          <a-option value="YYYY">年</a-option>
          <a-option value="YYYY-MM">年/月</a-option>
          <a-option value="YYYY-MM-DD">年/月/日</a-option>
          <a-option value="YYYY-MM-DD HH:mm:ss">年/月/日 时分秒</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="`快捷选项`"
        field="quickOptions"
        v-if="dataObj.mode === 'dataView'"
      >
        <a-select
          v-model="formData.quickOptions"
          label-in-value
          multiple
          placeholder="请选择快捷选项"
        >
          <a-option value="today">今天</a-option>
          <a-option value="thisYear">今年</a-option>
          <a-option value="thisQuarter">当前季度</a-option>
          <a-option value="thisMonth">当月</a-option>
          <a-option value="nearly3Days">近3天</a-option>
          <a-option value="nearly7Days">近7天</a-option>
          <a-option value="last3Days">未来3天</a-option>
          <a-option value="last7Days">未来7天</a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`内容提示`" field="placeholder">
        <a-input v-model="formData.placeholder"></a-input>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="defaultValue">
        <a-input-number
          :step="1"
          :max="24"
          :min="10"
          v-model="formData.wrapperCol"
        ></a-input-number>
      </a-form-item>
      <a-form-item :label="`默认值`" field="defaultValue">
        <a-select v-model="formData.defaultValue">
          <a-option value="">无</a-option>
          <a-option value="day">当天</a-option>
          <a-option value="now">此刻</a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`操作属性`" field="defaultValue">
        <a-checkbox v-model="formData.hide">隐藏</a-checkbox>
        <a-checkbox v-model="formData.disabled">禁用</a-checkbox>
        <a-checkbox v-model="formData.desensitization">脱敏</a-checkbox>
      </a-form-item>
      <a-form-item :label="`校验`">
        <a-checkbox v-model="formData.required">必填</a-checkbox>
        <validate-key
          v-if="formData.required"
          :form-data="formData"
        ></validate-key>
      </a-form-item>
      <a-form-item :label="`字段说明`" field="explain">
        <a-textarea v-model="formData.explain">必填</a-textarea>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { basicDefaultData, typeOptions } from "./../base/options";
import FieldLinkage from "@/components/Form/base/fieldLinkage.vue";
import ValidateKey from "@/components/Form/base/validateKey.vue";
import {
  changeAssignmentList,
  changeControlTypes,
  changeDataViewSel,
} from "@/mixins/methodsMixins";
export const defaultData = () => ({
  ...basicDefaultData(),
  name: "日期选择框",
  type: "datePicker",
  wrapperCol: 24,
  explain: "",
  dataType: "timestamp",
  typeFormat: "YYYY-MM-DD HH:mm:ss",
  searchFormat: "",
  defaultValue: "",
});

export const dataTypeOptions = [
  {
    label: "timestamp",
    value: "timestamp",
  },
];
export default {
  name: "DatePickerfo",
  components: { ValidateKey, FieldLinkage },
  inject: ["dataObj"],
  data() {
    return {
      rules: {
        dataIndex: [{ required: true, message: "必填" }],
        name: [{ required: true, message: "必填" }],
      },
      dataTypeOptions,
      typeOptions,
    };
  },
  computed: {
    formData() {
      return this.dataObj.pageData[this.dataObj.selectIndex].formData || {};
    },
  },
  watch: {
    formData: {
      immediate: true,
      handler(newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData =
            defaultData();
        }
      },
    },
  },
  methods: {
    changeAssignmentList,
    changeDataViewSel,
    changeControlTypes,
  },
};
</script>

<style scoped lang="less"></style>
